class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            target: {},
            counts: [],
            start: 0,
            pagesize: 12,
            showswitch: !0,
            pagestart: 0,
            list: [
                {
                    img: 'https://wx.qlogo.cn/mmopen/vi_32/0gLnJbs4IJOrbZcTOicFXr99icPt7xyFLXVcdO26fKicexC0ZnTo1xibec3GFWg6b9BLraGWvROJxeIoGBe8AXeQvA/132',
                    name: '123',
                    contents: '12312123123131312313123123213231312',
                    state: 0,
                }
            ],
        };
    }

    formatlist(list) {
        console.log(list, 'listlist')
        var listitem = []
        var {target} = this.state
        if (list.length) {

            list.map((x, i) => {
                console.log(x)
                listitem.push(
                    <tr key={i}>
                        <td className="imgname tconter"><img src={target.avatar || "未上传"} /></td>
                        <td className="img2 tconter">
                        <img src={x.avatarurl} />
                        <p>{x.username}</p>
                            </td>
                        <td className="tconter">{x.contents}</td>

      
                        <td className="operatebox">
                            <div className='operate' id={"ope" + x.id}>
                                <div>
                                    <img src="./src/del.png" />
                                    <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                </div>
                            </div>
                        </td>
                    </tr>




              
                )
                this.setState({ listitem })
            })
        } else {
            listitem.push(<div>无</div>)
            this.setState({ listitem })
        }
    }

    // 审核
    // toorder(id){
    //     var e = id;

    //     var {id} = this.state;
    //      var that = this;
    //      let {ishide} = this.state;
    //      $('#ishide'+e).toggle();
    //      // console.log(ishide,'hide');
    //      this.setState({ishide});
    //      $("#"+e).val('');
    //      this.setState({
    //          id:e
    //      })

    //  }
    //  删除
    del(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start } = this.state
        commentsrespdel(delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist(start)
            }
        })
    }
    //  reasonchange(e) {
    //     this.setState({
    //         reason: e.target.value
    //     })

    // }
    // statechange() {
    //     $('#inlineCheckbox').attr('checked','true')
    //     // console.log(e);
    //     this.setState({
    //         isshow: e
    //     })

    // }

    // setcategoryorder(e){
    //     // console.log(e)
    //     var {id} =this.state;
    //     let val=$('input:radio[name="inlineCheckbox"]:checked').val();
    //     console.log(val,'val')
    //     if(val==null){
    //         alert("请填写审核结果!");
    //         return;
    //     }else{
    //         commentsrespsetshow(id,res=>{
    //             if(res.issuccess==1){
    //             alert('设置成功');
    //             // this.setState({
    //             //     isshow
    //             // })
    //             this.freshlist(0);
    //             }

    //         });
    //     }

    // }
    componentDidMount() {
        this.freshlist(0)
        // let {list}=this.state,nwelist=[];
        // let id  = GetQueryString('id');
        // console.log(id,'id')
        // findmemberbyid(id,res=>{
        //     if(res.issuccess==1){
        //         console.log(res.data,'res.data');

        //         list.forEach(e=>{  
        //             var item = e;
        //             item = res.data
        //             nwelist.push(item)
        //         })     
        //         this.setState({
        //             list: nwelist
        //         })
        //     }
        //     this.formatlist(nwelist)
        // })  
    }
    toback() {
        window.location.href = "./comment.html";
    }
    freshlist(start) {
        //     let {pagesize} = this.state, cid  = GetQueryString('id');
        // respmpgetlist({pagesize,start,cid,isback:1},res=>{
        //     if(res.issuccess==1){
        //     if(start == 0){
        //         let pagecount = Math.ceil( res.total/pagesize);
        //         this.setpager(pagecount,start);
        //         this.setState({start,target:res.data})
        //         this.formatlist(res.list)
        //     }

        // }
        // })
        let { pagesize } = this.state, cid = GetQueryString('id');
        respmpgetlist({ pagesize, start, cid, isback: 1 }, res => {
            if (res.issuccess == 1) {
                if (start == 0) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, target: res.data })
                }
                this.formatlist(res.list);
            }
        })
    }
    setpage(e) {
        let { pagesize, state, start } = this.state
        pagesize = parseInt(e)
        start = 0
        this.setState({ pagesize, start }, () => {
            this.freshlist(start, state)
        })
    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 1; i < pagecount + 1; i++) {
            counts.push(start + i)
        }
        this.setState({ counts })
    }
    clickpage(e) {
        console.log(e)
        let { start, pagesize } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            this.freshlist(start)
        })
    }

    render() {
        // console.log(this.state.list[0],'this.state.list');

        // var listobj=this.state.list[0];
        let { clicknew, counts, listitem, pagestart, keyword, showswitch, target } = this.state;

        return (
            <div className="breadLinebox">
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <div className='content_wrap panel-default content_wrap'>
                    <div className='breadLine '>
                        当前位置 > <span onClick={this.toback.bind(this)} style={{ cursor: 'pointer' }}>评论管理 </span>> 查看回复
                    </div>
                    <div id="div" className="content form">
                        <div className="formtitle">
                            <p>查看回复</p>
                        </div>

                        <div className="formcontent">

                            <div className="input-group flex">
                                <span className="subheading">用户头像:</span>
                                <p><img src={target.avatar || "未上传"} /></p>
                            </div>

                            <div className="input-group flex">
                                <span className="subheading">用户名字:</span>
                                <span className="inputcontent">{target.username || "未填写"}</span>
                            </div>
                            <div className="input-group flex">
                                <span className="subheading">用户评论:</span>
                                <span className="inputcontent">{target.contents || "未填写"}</span>
                            </div>

                            <div className="input-group flex">
                                <span className="subheading">用户审核:</span>
                                <span className="inputcontent">{target.state == "0" ? "未审核" : target.state == "1" ? "已通过" : "未通过" || "未选择"}</span>
                            </div>

                        </div>





                        <table className="tab">
                            <thead>
                                <tr>

                                    <th className="tconter">用户头像</th>
                                    <th className="tconter avater">回复头像和名字</th>
                                    <th className="tconter huifu">回复评论</th>
                                 
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        {/* <table className="table table-hover">
                        <thead>
                            <th className="imgname">回复头像和名字</th>
                            <th className="comment">回复评论</th>
                            <th className="examine">回复审核</th>
                            <th>操作</th>
                        </thead>
                        <tbody> 
                         {listitem}
                        </tbody>
                    </table> */}
                        {/* <div style={{display:showswitch?"":"none"}}><Pager counts={counts} click={this.clickpage.bind(this)} index={pagestart}/></div> */}



                    </div>
                    <div className="pagerbox">
                        <p>共{this.state.total}条</p>
                        <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                    </div>
                </div>
            </div>
        )
    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='comment' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)